<template>
	<view class="u-page">
		<view v-for="(item, index) in list" :key="index">
			<u-cell customStyle="background:#fff;" @click="showStore(item,index)" :title="item.customer.name" :isLink="!showNotice">
				<view slot="label">
					<text class="tag-info">{{item.month}}</text>
					<text class="tag-info">{{item.goods.name}}</text>
				</view>
				<view slot="value">
					<label v-if="showNotice">
						<text style="margin-right: 20rpx;">选中</text><checkbox :value="item.id" :checked="item.is_check" color="#3f9ad7"/>
					</label>
					<text v-else>￥{{item.total_money}}</text>
				</view>
			</u-cell>
		</view>
		<u-empty v-if="list.length==0" text="没有账单!" mode="search" marginTop="50"></u-empty>
		<block v-if="!showNotice">
		<view class="noticebtn" @click="showNotice=true;">
			<u-icon name="volume-fill" size="24" color="#fff"></u-icon>
		</view>
		<view class="searchbtn" @click="showSearch=true;">
			<u-icon name="search" size="24" color="#fff"></u-icon> 
		</view>
		</block>
		<view class="btn-footer" v-if="showNotice">
			<u-button @click="piliangNotice" text="批量提醒" size="small" type="success"></u-button>
			<u-button @click="showNotice=false;" text="返回列表" size="small" type="primary" customStyle="margin-top:10rpx;"></u-button>
		</view>
		<u-popup :show="showDetail" @close="showDetail=false" mode="center" :round="4" customStyle="width:80%;padding:30rpx 0;">
			<view class="detail" v-if="detail">
				<view @click="showPic(detail.customer.cover_url)" class="img" :style="'background:url('+detail.customer.cover_url+')no-repeat;background-size:cover;'"></view>
				<view class="itx">联系人：{{detail.customer.contact}} - {{detail.customer.mobile}} <text @click="call(detail.customer.mobile)" style="white-space: nowrap;margin-left: 6rpx;" class="tag-info">拨打</text></view>
				<view class="itx">地址：{{detail.customer.address}} <text @click="local(detail.customer)" style="white-space: nowrap;margin-left: 6rpx;" class="tag-info">导航</text></view>
				<view class="itx">消费金额：￥{{detail.total_money}}</view>
				<view class="itx">账单日期：{{detail.starttime | parseDate}} 到 {{detail.endtime | parseDate}}</view>
				<u-button type="warning" size="small" customStyle="margin-bottom:20rpx;" @click="cuiZang(detail.id)">微信催账</u-button>
				<u-button type="success" size="small" @click="downPay(detail.id)">线下付款</u-button>
			</view>
		</u-popup>
		<u-popup :show="showPay" @close="showPay=false" mode="center" :round="4" customStyle="width:80%;padding:20rpx 0;">
			<view class="search">
				<u--textarea v-model="formdata.remark" placeholder="请输入备注"></u--textarea>
				<u-button type="warning" size="small" @click="submit" customStyle="margin-top:20rpx;">确认</u-button>
			</view>
		</u-popup>
		<u-popup :show="showSearch" @close="showSearch=false" mode="center" :round="4" customStyle="width:80%;padding:20rpx 0;">
			<view class="search">
				<u-input placeholder="请输入店铺名称或店主姓名" v-model="keywords"/>
				<u-button type="primary" size="small" @click="search" customStyle="margin-top:20rpx;">查询</u-button>
				<u-button type="warning" size="small" @click="reset" customStyle="margin-top:20rpx;">重置</u-button>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import {methods} from '@/utils/methods.js';
	export default {
		data() {
			return {
				list:[],
				endData:false,
				page:1,
				showDetail:false,
				detail:'',
				showSearch:false,
				showNotice:false,
				keywords:'',
				showPay:false,
				formdata:{
					id:'',
					remark:''
				}
			}
		},
		filters:{
			parseDate:function(data){
				console.log(data);
				return data.slice(0,10);
			}
		},
		onPullDownRefresh() {
			this.reset(true);
		},
		onReachBottom(){
			this.pagelist();
		},
		onLoad(e) {
			this.reset();
		},
		methods: {
			...methods,
			piliangNotice:function(){
				let ids=[];
				this.list.forEach(res=>{
					if(res.is_check){
						ids.push(res.id);
					}
				});
				this.$post('admin/customer/noticePay',{ids:ids},true).then(res=>{
					this.showNotice=false;
				});
			},
			downPay:function(id){
				this.formdata.id=id;
				this.showDetail=false;
				this.showPay=true;
			},
			submit:function(){
				if(this.formdata.remark.trim()==''){
					this.$msg('备注为必填项');
					return;
				}
				this.$post('admin/customer/paymonth',this.formdata,true).then(res=>{
					this.showPay=false;
					this.reset();
				});
			},
			cuiZang:function(id){
				uni.showModal({
					content:'你确定要给这个店铺的管理员发送催收消息吗？',
					success: (e) => {
						if(e.confirm){
							this.$post('admin/customer/noticePay',{ids:[id]},true);
						}
					}
				})
			},
			showPic:function(url){
				uni.previewImage({
					urls:[url]
				});
			},
			reset:function(pulldown=false){
				this.showSearch=false;
				this.keywords='';
				this.list=[];
				this.endData=false;
				this.page=1;
				this.pagelist(pulldown);		
			},
			search:function(){
				this.showSearch=false;
				this.list=[];
				this.endData=false;
				this.page=1;
				this.pagelist();		
			},
			call:function(phone){
				uni.makePhoneCall({
					phoneNumber:phone
				});
			},
			local:function(detail){
				uni.openLocation({
					latitude:parseFloat(detail.latitude),
					longitude:parseFloat(detail.longitude),
					fail(e) {
						console.log(e);
					}
				});
			},
			showStore:function(detail,index){
				if(this.showNotice){
					this.list[index].is_check=!this.list[index].is_check;
				}else{
					this.detail=detail;
					this.showDetail=true;
				}	
			},
			pagelist:function(pulldown=false){
				if(this.endData){
					this.$msg('已经到底了');
					return;
				}
				this.$get("admin/customer/yuefubill",{
					page:this.page,
					keywords:this.keywords
				},true).then(res=>{
					if(pulldown){
						uni.stopPullDownRefresh();
					}
					if(res.length<10){
						this.endData=true;
					}
					this.list=this.list.concat(res);	
					this.page++;	
				});		
			}
		}
	}
</script>

<style lang="scss">
	page{
		background-color: #eeeeee;
	}
	.u-page{
		padding-bottom: 180rpx;
	}
	.noticebtn{
		position: fixed;
		bottom: 100rpx;
		right: 20rpx;
		background-color: #3f9ad7;
		border-radius: 50%;
		padding: 8rpx;
		z-index: 999; 
	}
	.searchbtn{
		position: fixed;
		bottom: 20rpx;
		right: 20rpx;
		background-color: #3f9ad7;
		border-radius: 50%;
		padding: 8rpx;
		z-index: 999;
	}
	.detail{
		padding: 20rpx;
		padding-top: 0;
		text-align: center;
		.itx{
			font-size: 28rpx;
			text-align: left;
			margin-bottom: 20rpx;
		}
		.itx:last-child{
			margin-bottom: 0rpx;
		}
		.img{
			width: 100%;
			height: 300rpx;
			margin-bottom: 10rpx;
		}
	}
	.search{
		padding: 20rpx;
	}
	.btn-footer{
		position: fixed;
		bottom: 40rpx;
		width: 90%;
		left:5%;
	}
</style>